<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./detailspage.css" />
		<link rel="stylesheet" href="./font/iconfont.css">
	</head>
	<body>
		<div class="maskpage">
			<div class="cart">
				<p>购物袋<span class="num">0</span></p><span class="delete">×</span>
				<div class="product">
					<div class="product-left">
						<img src="" alt="">
						<i>已加购</i>
					</div>
					<div class="product-right">
						<ol>
							<li class="name">凉鞋</li>
							<li class="color">颜色：白色</li>
							<li class="size">尺码：36</li>
							<li class="num">数量：1</li>
							<li class="price"></li>
						</ol>
						<span class="delete2" style="cursor:pointer;">删除商品</span>
					</div>
				</div>
				<div class="kong">购物车空空</div>
				<h6 class="total2">预计总计：￥5,900 00</h6>
				<b style="cursor:pointer;">进入购物袋</b>
			</div>

		</div>
		<div class="top">
			<div class="top-up">
				<span class="iconfont icon-dianhua font1"></span>
				<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
				<img src="./img/2.png" alt="" class="fendi">
				<div class="top-right">
					<a href="#">FENDI与<span class="person"></span></a>
					<a href="personcenter.html">我的订单</a>
					<span class="iconfont icon-sousuo font2"></span>
					<span class="iconfont icon-nanzhuang font3"></span>
				</div>
			</div>
			<div class="nav">
				<ul>
					<li>女士
						<div class="menu1">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>男士

						<div class="menu2">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					<li>童装
						<div class="menu3">
							<dl>
								<dt>精选推荐</dt>
								<dd><a href="#">新款上市</a></dd>
								<dd><a href="#">Fendi x Chaos</a></dd>
								<dd><a href="#">春夏系列2021</a></dd>
								<dd><a href="#">Fendi Peekaboo</a></dd>
								<dd><a href="#">Fendi Baguette</a></dd>
								<dd><a href="#">Forever Fendi Watches</a></dd>
								<dd><a href="#">秋冬系列2020-21</a></dd>
							</dl>
							<dl>
								<dt>手袋</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Peekaboo</a></dd>
								<dd><a href="#">Baguette</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">手提包</a></dd>
								<dd><a href="#">波士顿包</a></dd>
								<dd><a href="#">水桶包</a></dd>
								<dd><a href="#">迷你包</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">手拿包</a></dd>
								<dd><a href="#">背包</a></dd>
								<dd><a href="#">珍惜皮手袋</a></dd>

							</dl>
							<dl>
								<dt>成衣</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">外套</a></dd>
								<dd><a href="#">夹克</a></dd>
								<dd><a href="#">连衣裙</a></dd>
								<dd><a href="#">上衣和衬衫</a></dd>
								<dd><a href="#">针织衫</a></dd>
								<dd><a href="#">半身裙及裤装</a></dd>
								<dd><a href="#">T恤衫和卫衣</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">运动服</a></dd>
								<dd><a href="#">沙滩装</a></dd>

							</dl>
							<dl>
								<dt>鞋履</dt>
								<dd><a href="#" class="check">查看全部</a></dd>
								<dd><a href="#">Colobri</a></dd>
								<dd><a href="#">长靴及短靴</a></dd>
								<dd><a href="#">单肩包</a></dd>
								<dd><a href="#">运动鞋</a></dd>
								<dd><a href="#">高跟鞋</a></dd>
								<dd><a href="#">路跟鞋</a></dd>
								<dd><a href="#">平底鞋</a></dd>
								<dd><a href="#">凉鞋及拖鞋</a></dd>
								<dd><a href="#">袜子</a></dd>

							</dl>
							<dl>
								<dt>配饰</dt>
								<dd><a href="#">纺织品配件</a></dd>
								<dd><a href="#">时尚珠宝</a></dd>
								<dd><a href="#">Peekaboo配件</a></dd>
								<dd><a href="#">手袋配件</a></dd>
								<dd><a href="#">皮夹和小配件</a></dd>
								<dd><a href="#">太阳眼镜</a></dd>
								<dd><a href="#">腕表</a></dd>
								<dd><a href="#">皮带</a></dd>
								<dd><a href="#">腰包</a></dd>
								<dd><a href="#">旅行配件</a></dd>
								<dd><a href="#">高科技配件</a></dd>
							</dl>
						</div>
					</li>
					<li>婚礼灵感
						<div class="menu4">
							<div class="menu4-dl">
								<dl>
									<dt>她的礼物</dt>
									<dd><img src="./img/5.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Fendi x Chaos</a></dd>
									<dd><a href="#">春夏系列2021</a></dd>
									<dd><a href="#">Fendi Peekaboo</a></dd>
									<dd><a href="#">Fendi Baguette</a></dd>
								</dl>
								<dl>
									<dt>他的礼物</dt>
									<dd><img src="./img/4.jpg" alt=""></dd>
									<dd><a href="#" class="check">查看全部</a></dd>
									<dd><a href="#">Peekaboo</a></dd>
									<dd><a href="#">Baguette</a></dd>
									<dd><a href="#">单肩包</a></dd>
									<dd><a href="#">手提包</a></dd>
								</dl>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="main">
			<ul>
				<li>女士</span>
				</li>
				<li>鞋履<span class="iconfont icon-xiangxiajiantou font"></span>
					<ol class="size-menu">
						<li>手袋</li>
						<li>鞋履</li>
						<li>凉鞋及拖鞋</li>
						<li>配饰</li>
					</ol>
				</li>
				<li>凉鞋及拖鞋<span class="iconfont icon-xiangxiajiantou font"></span>
					<ol class="size-menu1">
						<li>查看更多</li>
						<li>Colibri</li>
						<li>长靴及短靴</li>
						<li>运动鞋</li>
						<li>高跟鞋</li>
						<li>露跟鞋</li>
						<li>平底鞋</li>
						<li>凉鞋及拖鞋</li>
						<li>袜子</li>
					</ol>
				</li>
			</ul>
			<i>排序方式:默认<span class="iconfont icon-xiangxiajiantou"></span></i>
		</div>
		<div class="box">
			<div class="left">
				<ul class="lilist">
					<li id="template">
						<img src="" alt="">
					</li>
					<li id="template1">
						<img src="" alt="">
					</li>
					<li id="template2">
						<img src="" alt="">
					</li>
					<li id="template3">
						<img src="" alt="">
					</li>
				</ul>
			</div>
			<div class="middle">
				<div class="mask"></div>
				<img src="" alt="" id="bigImg">

				<div class="glass">
					<img src="" alt="" id="glassImg">
				</div>

			</div>
			<div class="right">
				<div class="right-up">
					<h5>凉鞋</h5>
					<h6></h6>
					<i>货号：8R7086TC3F0QA0</i>
					<h4></h4>
					<span>选择尺码</span><a href="#">尺码指南</a>
					<div class="size">36
						<select class="ul">
							<option>34-请洽线下精品店</option>
							<option>34.5-请洽线下精品店</option>
							<option>35-请洽线下精品店</option>
							<option>35.5-请洽线下精品店</option>
							<option>36-请洽线下精品店</option>
							<option>36.6-请洽线下精品店</option>
							<option>37-请洽线下精品店</option>
							<option>37.5-请洽线下精品店</option>
							<option>38-请洽线下精品店</option>
							<option>38.5-请洽线下精品店</option>
							<option>39-请洽线下精品店</option>
							<option>39.5-请洽线下精品店</option>
							<option>40-请洽线下精品店</option>
						</select>
					</div>
				</div>
				<div class="right-down">
					<i class="xian"></i>
					<p>加入购物车</p>
					<span class="iconfont icon-caidan font3"></span><span>所有订单均享有免费送货服务,快速送货服务和7天内免费退货</span>
					<i class="xian"></i>
					<span class="iconfont icon-dianhua font1"></span>
					<h6>联系我们400 920 3777</h6>
					<i class="xian"></i>
				</div>
			</div>
		</div>
		</div>
		<div class="review">
			<p>产品质量:</p>
			<ul class="star">
				<li index="0"></li>
				<li index="1"></li>
				<li index="2"></li>
				<li index="3"></li>
				<li index="4"></li>

			</ul>
			<span class="words"></span>

		</div>
		<div class="descrip">

			<b>描述</b>
			<i>材质：100%小牛皮，内里：100%山羊皮</i>
			<span>更多细节</span>
			<p>Promenade平底鞋，宽饰带，搭配FF Baguette金属搭扣。白色鳄鱼纹皮革材质。65毫米同色系包覆粗跟，呈现凸纹压花效果。意大利制造</p>
		</div>
		<div class="tulist">
			<p class="p">猜你喜欢</p>
			<ul class="like">
				<li id="model">
					<img src="" alt="">
					<!-- <img src="" alt="" class="imgB"> -->
					<h6></h6>
					<p></p>
					<span></span>
				</li>
			</ul>
		</div>
		<div class="message">
			<p>订阅我们的新闻资讯</p>
			<p>要获得更多个性化内容，包括访问您所在地区的特殊活动和最新消息，请提供一下详细信息</p>
			<p>手机号码*</p>
			<b></b>
		</div>
		<div class="footer">
			<dl>
				<dt>客服关怀</dt>
				<dd>联系我们</dd>
				<dd>常见问题与解答</dd>
				<dd>订单与配送</dd>
				<dd>退货与退款</dd>
				<dd>追踪您的订单</dd>
			</dl>
			<dl>
				<dt>FENDI与我</dt>
				<dd>登录/注册</dd>
			</dl>
			<dl>
				<dt>企业</dt>
				<dd>寻找精品店</dd>
				<dd>Fendi Private Suites</dd>
				<dd>可持续性</dd>
				<dd>供应链透明化</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>关于FENDI</dd>
				<dd>Fendi的历史</dd>
				<dd>量身定做</dd>
				<dd>皮草工坊</dd>
				<dd>家居</dd>
				<dd>Fendi Boutique Hotel</dd>
				<dd>腕表</dd>
			</dl>
			<dl>
				<dt>法律咨询</dt>
				<dd>隐私条款</dd>
				<dd>销售条款与条件</dd>
				<dd>网站使用条款</dd>
				<dd>行为准则</dd>
			</dl>
			<dl>
				<dt>FENDI ROMA</dt>
				<dd>
					<span class="iconfont icon-gongzhonghao"></span>
					<span class="iconfont icon-tubiao214"></span>
				</dd>
			</dl>
		</div>
		<div class="finally">
			<p>国家/地区: 中国大陆<span class="iconfont icon-xiangxiajiantou"></span></p>
			<span>@FENDI-保留所有权</span>
			<span>沪ICP备1301824号-1</span>
			<span>沪公网安备31010602001819号</span>
			<span>上海工商</span>
		</div>
	</body>
</html>
<script src="jquery.min.js"></script>
<script>
	let address = "http://127.0.0.1:81"
	let template = $("#template");
	let template1 = $("#template1");
	let template2 = $("#template2");
	let template3 = $("#template3");
	let lilist = $(".left .lilist");
	let bigImg=$("#bigImg");
	let smallImg = $(".lilist img")
	let middle = document.querySelectorAll(".middle")[0];
	let mask = document.querySelectorAll(".mask")[0];
	let glass = document.querySelectorAll(".glass")[0];
	let glassImg = document.getElementById("glassImg")
	let product=$(".product");
	
	let rightUp=$(".right-up");
	String.prototype.parseUrl = function() {
		let arr = this.slice(this.indexOf("?") + 1).split("&");
		let result = {};
		arr.forEach(item => {
			let key = item.split("=")[0];
			let value = item.split("=")[1];
			result[key] = value;
		})
		return result;
	}
	//向后端发送ajax请求
	
	let http = new XMLHttpRequest();
	http.open("get", `${address}/details?id=${location.href.parseUrl().id}`);
	http.send();
	http.onreadystatechange = function() {
		if (http.readyState === 4) {
			let data = JSON.parse(http.responseText);
			console.log(data)

			template.find("img").attr("src", data.img);
			template1.find("img").attr("src", data.img1);
			template2.find("img").attr("src", data.img2);
			template3.find("img").attr("src", data.img3);
			bigImg.attr("src",data.img);
			rightUp.find("h6").html(data.details);
			rightUp.find("h4").html(data.price);
			$(glassImg).attr("src",bigImg.attr("src"));
			
		}
	}
	//放大镜效果
	let li = $(".lilist li")
	
	for (let i = 0; i < li.length; i++) {
		// console.log(li[i])
		li.eq(i).click(function() {
			let imgsrc = ($(this).find("img").attr("src"));
			
			bigImg.attr("src", imgsrc);
			$(glassImg).attr("src",bigImg.attr("src"));
			bigImg.fadeIn(3000);
			li.eq(i).css({
				border: "1px solid #fdf406"
			})
			li.eq(i).mouseleave(function() {
				li.eq(i).css({
					border: "none"
				})
			})
		})

	}
	//遮罩层跟随鼠标移动
	
	middle.onmousemove = function(event) {
		mask.style.display = "block";
		glass.style.display = "block";

		mask.style.left = event.pageX - 160 - mask.offsetWidth / 2 + "px";
		mask.style.top = event.pageY - 160 - mask.offsetHeight / 2 + "px";
		//控制放大镜的位置
		glassImg.style.left = -(event.clientX * 1.4) + (mask.offsetWidth / 2 * 1.4) + "px";
		glassImg.style.top = -(event.clientY * 0.45) + (mask.offsetHeight / 2 * 0.45) + "px";
		//控制遮罩层不能超过middle区域
		if (parseInt(mask.style.left) < 0) {
			mask.style.left = 0;
			glassImg.style.left = 0;
		}
		if (parseInt(mask.style.top) < 0) {
			mask.style.top = 0;
			glassImg.style.top = 0;
		}
		if (parseInt(mask.style.left) > middle.offsetWidth - mask.offsetWidth) {
			mask.style.left = middle.offsetWidth - mask.offsetWidth + "px";
		}
		if (parseInt(mask.style.top) > middle.offsetHeight - mask.offsetHeight) {
			mask.style.top = middle.offsetHeight - mask.offsetHeight + "px";
		}
	}


	let descrip = $(".descrip");
	$(".descrip b").click(function() {
		$(".descrip i").css({
			display: "block"
		})
		$(".descrip p").css({
			display: "none"
		})
		$(".descrip b").css({
			border: "none"
		})
		$(".descrip span").css({
			borderBottom: "3px solid  #f9b949"
		})

	})
	$(".descrip span").click(function() {
		$(".descrip p").css({
			display: "block"
		})
		$(".descrip span").css({
			border: "none"
		})
		$(".descrip b").css({
			borderBottom: "3px solid  #f9b949"
		})
		$(".descrip i").css({
			display: "none"
		})
	})
	$(".main .font").click(function() {
		$(".size-menu").css({
			display: "block"
		})
	})
	// //向后端发送请求

	let model = $("#model");
	let like = $(".like")
	let http1 = new XMLHttpRequest();
	http1.open("get", `${address}/details2`);
	http1.send();
	http1.onreadystatechange = function() {
		if (http1.readyState === 4) {
			let data = JSON.parse(http1.responseText);
			data.forEach(item => {
				// console.log(item)
				//克隆li
				let newmodel = model.clone(true);
				newmodel.attr("id", "");
				newmodel.find("img").attr("src", item.img);
				newmodel.find("h6").html(item.title);
				newmodel.find("p").html(item.detail);
				newmodel.find("span").html(item.price);
				newmodel.appendTo(like);
				// console.log(item.title)
			})
		}
	}
		//购物车功能
		$(".right-down p").click(function(){
			localStorage.setItem("goodsid",location.href.parseUrl().id)
			$(".maskpage").css({
				display:"block"
			})
			$.ajax({
				url:`${address}/details`,
				data:{
					id:location.href.parseUrl().id
				},
				
				success(data){
					// console.log(data)
					product.find("img").attr("src",data.img)
					product.find(".price").html(data.price)
					$(".total2").html(data.price)
				}
			})
			$(".product-right").find(".delete2").click(function(){
				$(".kong").css({
					display:"block"
				})
				product.css({
					display:"none"
				})
				$(".total2").css({
					display:"none"
				})
			})
			$(".maskpage .num").html(Number($(".maskpage .num").html()+1))
				// console.log($(".maskpage .num").html())
			})
		$(".maskpage .delete").click(function(){
			$(".maskpage").css({
				display:"none"
			})
		})
		$(".cart b").click(function(){
			let userid=localStorage.getItem("userid")
			if(!userid){
				window.location.href=`${address}/loadingpage.html`
			}
			else{
				window.location.href=`${address}/cartpage.html`
			}
		}) 
		// console.log(location.href.parseUrl().id);
		
	//实现评价功能
	

		let stars = document.querySelectorAll(".star li")
		// console.log(stars.length)
		let ul = document.querySelectorAll(".star")[0]
		let words = document.querySelectorAll(".words")[0]
		let arr = ["太差了", "就那样", "还可以", "挺好", "非常棒"]
		let score = 0; //选中当前所在星星的分数
		//鼠标划上点亮星星

	for (let i = 0; i < stars.length; i++) {
		stars[i].onmouseenter=function(){
					// alert(1)
					 let n=this.getAttribute("index");
					for(let i=0;i<=n;i++){
						stars[i].className="light";
					}
				}
		//熄灭所有星星
		stars[i].onmouseleave=function(){
				for(let i=0;i<stars.length;i++){
					stars[i].className="";
				}
				for(let i=0;i<=score;i++){
					stars[i].className="light";
				}
			}
		//点击点亮星星
			stars[i].onclick=function(){
				for(let i=0;i<stars.length;i++){
					score=Number(this.getAttribute("index"));
					words.innerHTML=arr[score];
				}
		}

	}
</script>


		
